<template>
    <div class="footer">
        <span class="todo-count">共<strong>{{lastLength}}</strong>条未完成任务</span>
        <ul class="filters">
            <li>
                <a @click.prevent="emit('updateStatus','all')" :class="{selected: status === 'all'}" href="#/">All</a>
            </li>
            <li>
                <a @click.prevent="emit('updateStatus','active')" :class="{selected: status === 'active'}" href="#/active">Active</a>
            </li>
            <li>
                <a @click.prevent="emit('updateStatus','completed')" :class="{selected: status === 'completed'}" href="#/completed">Completed</a>
            </li>
        </ul>
        <button class="clear-completed" @click="emit('clearCompleted')">清空任务</button>
    </div>
</template>

<script setup>
import { ref,defineProps } from 'vue'
const props = defineProps({
    'lastLength':String,
    'status':String
})
const emit = defineEmits(['updateStatus','clearCompleted'])
</script>

<style scoped>
.todo-count {
    display: block;
    position: relative;
    top: 15px;
    left: 10px;
    width: 10%;
}
.filters {
    position: absolute;
    left: calc(50% - 100px);
    right: auto;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-left: auto;
}
.filters li {
    margin-right: 10px;
}
.filters li:last-child {
    margin-right: 0;
}
a{
    text-decoration: none;
}
.selected {
    font-weight: bold;
    color: #333;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}
.clear-completed{
    float: right;
    margin-top: -8px;
    margin-right: 10px;
    background-color: white;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 3px;
    padding: 5px 10px;
}
</style>